<template>
	<view>
		<view class="product-box" :class="column == 2 ? 'bgfff padding' : 'bg-gray'">
			<view class="product-item" @tap="toDetail" :data-id="product.id" :class="col" v-for="product,indexx in productList" :key="indexx">
				<view style="img-parent">
					<view>
						<image class="product-img" lazy-load="true" :src="product.img"></image>
					</view>
				</view>
				<view class="product-left">
					<view class="product-name">{{product.name.length>21?product.name.substring(0,20)+'...':product.COURSE_NAME}}</view>
					<view class="hoursAndTeacher">
						<view class="price">
							<text style="font-size:20rpx;">￥</text>{{product.price}}
						</view>
						<view class="addicon">+</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_URL } from '../../api/http.js';
	/**
	 * GridItem 课程列表
	 * @description 课程列表组件
	 */
	export default {
		components: {},
		name: 'JhxProductList',
		props: {
			productList:{
				type:Array,
				value:[]
			},
			column:{
				type:Number,
				value:1
			},
			status:{
				type:String,
				value:''
			},
			thumb:{
				type:Boolean,
				value:true
			}
		},
		data() {
			return {
				col : 'col-'+this.column,
				imgurl: ''
			}
		},
		created() {
			
		},
		beforeDestroy() {
			
		},
		methods: {
			toDetail(e) {
				console.log(e)
				
				
				var id = e.currentTarget.dataset.id;    
				uni.navigateTo({
					url: '/pages/p/l?id='+id,
				});
			}
		}
	}
</script>

<style lang="scss">
	.bg-gray{background-color: #f2f2f2;}
	.padding{padding: 0 4%;}
	.product-box{
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		clear:both;
		overflow: hidden;
		padding-bottom: 36rpx;
		border-radius: 18rpx;
	}
	.product-item{box-sizing: border-box;position: relative;z-index: 10;
	padding-bottom: 20rpx;clear:both;}
	.product-sale{display: flex;justify-content: space-between;color: #999;font-size: 24rpx;width: 100%;}
	.product-left{width: 100%;box-sizing: border-box;}
	.product-name{color: #4A4A4A;height:90rpx;padding-bottom: 10rpx;padding:0 16rpx;font-size:28rpx;}
	.product-desc{color: #999;font-size: 26rpx;margin-top: 10rpx;}
	.col-1 {width: 100%;background-color: #fff;display: flex;padding: 15rpx 4%;box-sizing: border-box;}
	.col-1 .product-item{display: flex;}
	.col-1 .product-img{width: 250rpx;height: 166rpx;margin-right: 20rpx;}
	.col-1 .product-sale{margin-top: 10rpx;}
	.col-2 {width: 48.5%;margin: 30rpx 0 0 0;background-color: #fff;border-radius: 5px;}
	.col-2:nth-child(odd){margin-right: 3%;}
	.col-2 .product-img{width: 100%; border-radius: 20rpx;z-index:-9999;}
	.col-2 .product-sale{margin-top: 10rpx;}
	.col-2 .product-left{padding: 8rpx 0rpx;}
	.hoursAndTeacher{
		display: flex;
		justify-content: space-between;
		color:#999;
		align-items: center;
	}
	.hours{font-size:20rpx;color:#999;display: flex;align-items: center;}
	.teacher{
		display: inline-block;
		font-size: 24rpx;
		// background-image: linear-gradient(#42B077,#64E69E);
		background-color: #42B077;
		padding: 5rpx 8rpx 2rpx 8rpx;
		color: #fff;
		border-radius: 4rpx;
	}
	.del-price{font-size: 20rpx;border-radius: 10rpx;background-color: skyblue;padding:3rpx 8rpx;border:1rpx solid #007aff;color:#007aff;}
	.price{font-size: 28rpx;font-weight:bold;border-radius: 10rpx;
	padding:3rpx 8rpx;
	color:#E76B51;}
	.tips{position: absolute;z-index: 9;}
	.product-img{
		height:300rpx;
		z-index: -999;
	}
	.img-parent{
		position:relative;
	}
	.red_tag{
		background-image: linear-gradient(to right,#F97038,#EA4A54);
		display: inline-block;
		padding:8rpx 15rpx;
		font-size: 24rpx;
		color:#fff;
		z-index: 9999999;
		border-top-left-radius: 15rpx;
		border-bottom-right-radius: 20rpx;
		position:absolute;
		top:0upx;
	}
	.learn_score{
		width:32rpx;
		height:32rpx;
		margin-right:5rpx;
	}
	.addicon{
		width:45rpx;
		height:45rpx;
		background-color: #FE0036;
		color:#eee;
		text-align: center;
		line-height: 45rpx;
		border-radius: 50%;
		font-size:32rpx;
		margin-right: 20rpx;
	}
</style>